<template>
  <div class="home">
    <!-- mes控制输入框，rig里面的内容为图标样式，title为标题 bgc为背景颜色，如想透明就为0，否则为1
    mes不为空就不显示文本框   rig里面写图标的具体样式
    title为标题的内容 -->
    <Head mes="" rig="el-icon-search" title="" bgc="1" />
    <div class="content">
      <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
      <div class="content-top">
        <router-link :to="{ name: 'Home' }" tag="span" class="bu"
          >推荐</router-link
        >
        <router-link :to="{ name: 'Home1' }" tag="span">活动</router-link>
        <router-link :to="{ name: 'Home2' }" tag="span">游记</router-link>
      </div>
      <div class="box">
        <img class="boot" src="@/assets/Homelog.png" alt="" />
        <div class="content-min">
          <div
            class="xun"
            v-for="(value, index) in school"
            :key="value.id"
            @click="qie(index)"
          >
            <span>热门游记</span>
            <img :src="value.url" alt="" />
            <span>{{ value.title }}</span>
            <div>
              <span class="el-icon-view">140</span>
              <span class="el-icon-chat-dot-round">22</span>
              <span
                @click.stop="qiehuan(index)"
                :class="{ sc: value.state == 1 }"
                class="el-icon-star-off"
                >12</span
              >
            </div>
            <div @click.stop="que(index)">
              <img :src="value.imgurl" alt="" />
              <span>{{ value.username }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- num的数字表示在第几页，以控制颜色 -->
    <div class="box-foot"></div>
    <Foot num="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Head from "@/components/Head.vue";
import Foot from "@/components/Foot.vue";

export default {
  name: "Home",
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      activeName: "second",
      school: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    qiehuan(index) {
      this.school[index].state = !this.school[index].state;
      this.ajax({
        method: "post",
        url: "/updateSta",
        data: {
          id: this.school[index].id,
          state: this.school[index].state,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    qie(index) {
      this.$store.commit("gaiid", this.school[index].id);
      this.$router.push({ name: "Mudidi" });
    },
    que(index) {
      this.$store.commit("gaiid", this.school[index].id);
      this.$router.push({ name: "Geren" });
    },
  }, 
  mounted() {
    if (localStorage.user == undefined) {
      alert("您还未登录");
      this.$router.push("/login");
      return;
    }
    this.ajax({
      method: "get",
      url: "/queryAll",
    }).then((res) => {
      this.school = res.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.content-top {
  // position: fixed;
  top: 60px;
  left: 0;
  display: flex;
  background-color: white;
  justify-content: space-between;
  // margin-top: 10px;
  > span {
    width: calc(100% / 3);
    height: 45px;
    line-height: 45px;
    text-align: center;
    // &:hover{
    //   border-bottom: 1px solid rgb(15, 208, 241);
    // }
  }
}
.sc {
  color: orange;
}
.bu {
  border-bottom: 4px solid rgb(15, 208, 241);
}
.boot {
  width: 100%;
  // margin-top:5px ;
}
.box {
  width: 100%;
  height: 718px;
  overflow: scroll;
  // border-top:1px solid  rgba(190, 190, 190, 0.719);
}
.content-min {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  // align-items: flex-start;
  // align-content:flex-start;
}
.box-foot {
  height: 65px;
}
.xun {
  margin: 5px;
  padding: 10px;
  box-sizing: border-box;
  width: 165px;
  display: flex;
  flex-wrap: wrap;
  // flex-direction: column;
  position: relative;
  // justify-content: space-between;
  box-shadow: 0px 0px 3px rgb(104, 104, 104);
  border-radius: 5px;
  > img {
    width: 100%;
    // height: 200px;
    margin-bottom: 9px;
  }
  > span:nth-of-type(1) {
    width: 75px;
    height: 25px;
    top: 15px;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    border-radius: 0 10px 10px 0;
    background-color: rgb(77, 76, 76);
    color: white;
    position: absolute;
  }
  > div:nth-of-type(1) {
    margin: 10px 0;
    > span {
      margin-right: 10px;
    }
  }
  > div:nth-of-type(2) {
    border-top: 1px solid rgba(168, 162, 162, 0.747);
    width: 100%;
    height: 20px;
    margin-top: 8px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    > img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    > span {
      margin-left: 10px;
    }
  }
}
</style>